<!--
 * @Author: qiaoxin
 * @Date: 2024-04-10 16:02:27
 * @LastEditors: zll
 * @LastEditTime: 2024-09-23 10:09:21
 * @Description: 
 * @FilePath: \erp-app\src\pages\pm\gongying\component\card.vue
-->
<template>
  <view class="card">
    <view class="main flex items-stretch">
      <view class="flex-1">
        <view class="title_row flex left flex-1">
          <view class="title">{{ _D.demandCode }}</view>
          <!-- <view v-if="isOpt">
            <wd-button @click="showActions" type="text">操作</wd-button>
          </view> -->
        </view>
        <view @click="toDetail">
          <view class="row flex">
            <view class="col">
              <text class="label">供应商：</text>
              <text class="text">{{ _D.cusCode || '' }}</text>
            </view>
          </view>
          <view class="row flex">
            <view class="col">
              <text class="label">需求类型：</text>
              <text class="text">{{ _D.demandType || '' }}</text>
            </view>
          </view>
          <view class="row flex">
            <view class="col">
              <text class="label">需求产品：</text>
              <text class="text">{{ _D.invName || '' }}</text>
            </view>
          </view>
          <view class="row flex">
            <view class="col">
              <text class="label">需求产品规格：</text>
              <text class="text">{{ _D.invStd || '' }}</text>
            </view>
          </view>
          <view class="row flex">
            <view class="col">
              <text class="label">是否有外来样：</text>
              <text class="text">{{ _D.sampleFlagName || '' }}</text>
            </view>
          </view>
          <view class="row flex">
            <view class="col">
              <text class="label">日期：</text>
              <text class="text">{{ formatByDayjs(_D.demandDate) }}</text>
            </view>
          </view>

          <view class="row flex">
            <view class="col">
              <text class="label">业务员：</text>
              <text class="text">{{ _D.personName }}</text>
            </view>
          </view>
          <view class="row flex" v-if="isPreview != '1'">
            <view class="col">
              <text class="label">审核状态：</text>
              <text class="text">
                <wd-tag
                  :bg-color="getStatus(_D.status)['color']"
                  :color="getStatus(_D.status)['color']"
                  plain
                >
                  {{ getStatus(_D.status)['label'] }}
                </wd-tag>
              </text>
            </view>
          </view>

          <view class="row flex">
            <view class="col">
              <text class="label">评审状态：</text>
              <text class="text">
                <wd-tag
                  :bg-color="getTaskFlag(_D.reviewStatus)['color']"
                  :color="getTaskFlag(_D.reviewStatus)['color']"
                  plain
                >
                  {{ getTaskFlag(_D.reviewStatus)['label'] }}
                </wd-tag>
              </text>
            </view>
          </view>

          <!-- <view class="row flex">
            <view class="col">
              <text class="label">评审结果：</text>
              <text class="text">
                {{ getRdFlag(_D.rdFlag)['text'] }}
              </text>
            </view>
          </view> -->

          <view class="row flex">
            <view class="col">
              <text class="label">需求描述：</text>
              <text class="text">{{ _D.demandDesc }}</text>
            </view>
          </view>

          <view class="row flex" v-if="isPreview != '1'">
            <view class="col">
              <text class="label">回复：</text>
              <text class="text">{{ _D.reply }}</text>
            </view>
          </view>
          <view class="row flex" v-if="_D.useFlag !== null">
            <view class="col">
              <text class="label">是否可用：</text>
              <text class="text">
                <wd-tag
                  :bg-color="getUseFlag(_D.useFlag)['color']"
                  :color="getUseFlag(_D.useFlag)['color']"
                  plain
                >
                  {{ getUseFlag(_D.useFlag)['text'] }}
                </wd-tag>
              </text>
            </view>
          </view>

          <view class="row flex">
            <view class="col">
              <text class="label">创建人：</text>
              <text class="text">{{ _D.createName }}</text>
            </view>
          </view>

          <view class="row flex">
            <view class="col">
              <text class="label">创建时间：</text>
              <text class="text">{{ _D.createTime }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="footer flex" v-if="showFooter">
      <view class="row flex">
        <view class="col">
          <text class="label" style="font-size: 30rpx">申请人：{{ _D.userName }}</text>
          <text class="text highlight"></text>
        </view>
      </view>
      <view class="action">
        <view class="btn primary" @click.stop="toDetail(_D)">
          <text>查看</text>
        </view>
      </view>
    </view> -->
    <wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />
  </view>
</template>

<script lang="ts" setup>
// import { getCurrentInstance } from 'vue';
import { formatByDayjs } from '@/utils/util';
import { submitProcess, revokeProcess, delObj } from '@/service/pm-requirement';
import { useDict } from '@/hooks/dict';
const emits = defineEmits(['refresh']);
const { appContext } = getCurrentInstance();
const props = defineProps({
  _D: {
    type: Object,
    default: () => {},
  },
  showFooter: {
    type: Boolean,
    default: false,
  },
  from: {
    type: String,
    default: '',
  },
  page: {
    type: String,
    default: '/pages/pm/requirement/detail',
  },
  isOpt: {
    type: Boolean,
    default: false,
  },
  isPreview: {
    type: String,
    default: '0',
  },
});
const isClicking = ref(false);
const toDetail = () => {
  if (isClicking.value) return;
  isClicking.value = true;
  uni.navigateTo({
    url:
      '/pages/pm/gongying/form?id=' + props._D.id + '&isPreview=' + (props._D.status == 0 ? 0 : 1),
    complete: () => {
      isClicking.value = false;
    },
  });

  // }
};

const statusList = [
  {
    text: '未提交',
    value: '0',
    color: '#108ee9',
  },
  {
    text: '审批中',
    value: '1',
    color: '#d46b08',
  },
  {
    text: '已审核',
    value: '2',
    color: '#87d068',
  },
  {
    text: '拒绝',
    value: '3',
    color: '#f50',
  },
  {
    text: '撤回',
    value: '9',
    color: '#f50',
  },
];

const { bill_status } = useDict('bill_status');
const { review_status } = useDict('review_status');

const getStatus = (status) => {
  if (status == null)
    return {
      text: '未提交',
      value: '0',
      color: '#108ee9',
    };
  const o1 = statusList.find((item) => item.value == status);
  const o = bill_status.value.find((item) => item.value == status);
  return o
    ? {
        ...o,
        color: o1['color'],
      }
    : { text: status };
};
const getUseFlag = (status) => {
  const list = [
    {
      text: '可用',
      value: '1',
      color: '#87d068',
    },
    {
      text: '不可用',
      value: '0',
      color: '#f50',
    },
  ];
  const o1 = list.find((item) => item.value == status);
  if (o1) {
    return o1;
  }
  return {
    text: '可用',
    value: '1',
    color: '#87d068',
  };
};

const show = ref(false);
const actions = ref([
  {
    name: '详情',
  },
]);

if (
  props._D.status == 0 ||
  props._D.status == null ||
  props._D.status == 3 ||
  props._D.status == 9
) {
  actions.value.push({
    name: '修改',
  });
  actions.value.push({
    name: '提交',
  });
  actions.value.push({
    name: '删除',
  });
}

if (props._D.status == 1) {
  actions.value.push({
    name: '撤回',
  });
}

function showActions() {
  show.value = true;
  return false;
}

function close() {
  show.value = false;
}

const select = (e) => {
  const name = e.item.name;
  if (name == '修改') {
    uni.navigateTo({
      url: '/pages/pm/requirement/form?id=' + props._D.id,
    });
  } else if (name == '详情') {
    uni.navigateTo({
      url: props.page + '?id=' + props._D.id + '&isDetail=1',
    });
  } else if (name == '提交') {
    uni.showModal({
      title: '提示',
      content: '是否提交该单据',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (cancel) {
          return;
        }
        submitProcess(props._D.id).then((res) => {
          uni.showToast({
            mask: true,
            title: `单据${props._D.demandCode}提交成功`,
          });
          emits('refresh');
        });
      },
    });
  } else if (name == '撤回') {
    uni.showModal({
      title: '提示',
      content: '是否撤回该单据',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (cancel) {
          return;
        }
        revokeProcess({
          id: props._D.id,
          instanceId: props._D.instanceId,
        }).then((res) => {
          uni.showToast({
            mask: true,
            title: `单据${props._D.demandCode}撤回成功`,
          });
          emits('refresh');
        });
      },
    });
  } else if (name == '删除') {
    uni.showModal({
      title: '提示',
      content: '是否删除该单据',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (cancel) {
          return;
        }
        delObj([props._D.id]).then((res) => {
          uni.showToast({
            mask: true,
            title: `单据${props._D.demandCode}删除成功`,
          });
          emits('refresh');
        });
      },
    });
  }
};

const getRdFlag = (RdFlag) => {
  const RdFlagList = [
    {
      text: '',
      value: null,
      color: '#108ee9',
    },
    {
      text: '不通过',
      value: '0',
      color: '#f50',
    },
    {
      text: '通过',
      value: '1',
      color: '#87d068',
    },
  ];
  const o = RdFlagList.find((item) => item.value == RdFlag);
  return o ? o : { text: RdFlag };
};

const getTaskFlag = (taskFlag) => {
  const taskflagList = [
    {
      text: '',
      value: null,
      color: '',
    },
    {
      text: '未提交',
      value: '0',
      color: '#108ee9',
    },
    {
      text: '待评审',
      value: '1',
      color: '#108ee9',
    },
    {
      text: '通过',
      value: '2',
      color: '#87d068',
    },
    {
      text: '不通过',
      value: '3',
      color: '#f50',
    },
  ];

  const o1 = taskflagList.find((item) => item.value == taskFlag);
  const o = review_status.value.find((item) => item.value == taskFlag);
  return o
    ? {
        ...o,
        color: o1['color'],
      }
    : { text: taskFlag };
};
</script>

<style scoped lang="scss">
.card {
  padding: 24rpx 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 15rpx;
  /* box-shadow: 0 15rpx 10rpx 0 #f7f7f7; */
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.main {
  .title_row {
    align-items: flex-start;
    overflow: hidden;
  }

  .title {
    flex: 1;
    margin-bottom: 32rpx;
    overflow: hidden;
    font-size: 32rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row {
    align-items: flex-start;
    margin-bottom: 24rpx;

    .col {
      display: flex;
      flex: 1;
      min-width: 45%;
      line-height: 28rpx;

      ~ .col {
        margin-left: 12rpx;
      }

      .label {
        flex-shrink: 0;
        width: 200rpx;
        font-size: 26rpx;
        color: #888;
      }

      .text {
        font-size: 28rpx;
        color: #000;
      }
    }
  }

  .left {
    overflow: hidden;
  }

  .right {
    flex-shrink: 0;
    margin-left: 12rpx;
    font-size: 24rpx;
    color: #666;
  }
}

.footer {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  font-size: 24rpx;
  color: #666;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1rpx;
    content: '';
    background-color: #f3f3f3;
  }

  .unit ~ .unit {
    margin-left: 18rpx;
  }

  .action {
    position: relative;
    right: -24rpx;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 6rpx 24rpx;
    font-size: 26rpx;

    .btn {
      padding: 6rpx 12rpx;

      ~ .btn {
        margin-left: 16rpx;
      }
    }

    .primary {
      color: #007aff;
    }

    .danger {
      color: #f56c6c;
    }
  }
  /* // .action {
        // 	padding: 6rpx 0 6rpx;
        // 	font-size: 26rpx;
        // 	color: #007aff;
        // } */
}

:deep(.wd-tag__text) {
  padding: 2rpx 4rpx !important;

  // font-size: 28rpx !important;
}
</style>
